
<#assign base=request.contextPath  />  
<!DOCTYPE html>
<head>
<!-- bootstrap css--> 
<link href=" ${base}/web/bootstrap/css/bootstrap.min.css"  rel="stylesheet" media="screen">

<!-- 设置该iframe中的背景色 与父页面一致-->
<style type="text/css" >
body { background:#f5f5f5  }
</style>
</head>
<body >
<!-- container -->


 
<div class="container " >
                     <!-- wizard -->
                    <div class="row section">
                         <!-- block -->
                        <div class="block">
             
                            <div class="block-content collapse in">
                                <div class="span12">
                                    <div id="rootwizard">
                                        <div class="navbar">
                                          <div class="navbar-inner">
                                            <div class="container">

                                        <ul>
                                            <li><a href="#tab1" data-toggle="tab">创建一个组</a></li>
 
                                        </ul>
                                         </div>
                                          </div>
                                        </div>
                    
                                        <div class="tab-content">
                                            <div class="tab-pane" id="tab1">
                                               <form  class="form-horizontal" id="group">
                                                  <fieldset>
                                                    <div class="control-group">
                                                      <label class="control-label" for="focusedInput">组名</label>
                                                      <div class="controls">
                                                        <input name="name" class="input-xlarge focused" id="focusedInput" type="text" value="">
                                                      </div>
                                                    </div>
                                                    <div class="control-group">
                                                      <label class="control-label" for="focusedInput">组描述 </label>
                                                      <div class="controls"> 
                                                       	 <textarea name="description" class="form-control" rows="4" ></textarea>
                                                      </div>
                                                    </div>  
                                                   </fieldset>
                                                </form>
                                            </div>
                                            <div class="tab-pane" id="tab2">
                                                <form class="form-horizontal">
                                                  <fieldset>
                                                    <div class="control-group">
                                                      <label class="control-label" 

for="focusedInput">Address</label>
                                                      <div class="controls">
                                                        <input class="input-xlarge focused" 

id="focusedInput" type="text" value="">
                                                      </div>
                                                    </div>
                                                    <div class="control-group">
                                                      <label class="control-label" 

for="focusedInput">City</label>
                                                      <div class="controls">
                                                        <input class="input-xlarge focused" 

id="focusedInput" type="text" value="">
                                                      </div>
                                                    </div>
                                                    <div class="control-group">
                                                      <label class="control-label" 

for="focusedInput">State</label>
                                                      <div class="controls">
                                                        <input class="input-xlarge focused" 

id="focusedInput" type="text" value="">
                                                      </div>
                                                    </div>
                                                  </fieldset>
                                                </form>
                                            </div>
                                            <div class="tab-pane" id="tab3">
                                                <form class="form-horizontal">
                                                  <fieldset>
                                                    <div class="control-group">
                                                      <label class="control-label" 

for="focusedInput">Company Name</label>
                                                      <div class="controls">
                                                        <input class="input-xlarge focused" 

id="focusedInput" type="text" value="">
                                                      </div>
                                                    </div>
                                                    <div class="control-group">
                                                      <label class="control-label" 

for="focusedInput">Contact Name</label>
                                                      <div class="controls">
                                                        <input class="input-xlarge focused" 

id="focusedInput" type="text" value="">
                                                      </div>
                                                    </div>
                                                    <div class="control-group">
                                                      <label class="control-label" 

for="focusedInput">Contact Phone</label>
                                                      <div class="controls">
                                                        <input class="input-xlarge focused" 

id="focusedInput" type="text" value="">
                                                      </div>
                                                    </div>
                                                  </fieldset>
                                                </form>
                                            </div>
                                            <ul class="pager wizard">
                                                <li class="previous first" style="display:none;"><a 

href="javascript:void(0);">First</a></li>
                                                <li class="previous"><a href="javascript:void

(0);">前步</a></li>
                                                <li class="next last" style="display:none;"><a 

href="javascript:void(0);">Last</a></li>
                                                <li class="next"><a href="javascript:void(0);">Next</a></li>
                                                <li class="next finish" style="display:none;"><a 

href="javascript:;">完成</a></li>
                                            </ul>
                                        </div>  
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /block -->
                    </div>
	            <!-- /wizard --> 
<!-- container -->
</div>
<!-- bootstrap js -->
<script src="${base}/web/vendors/jquery-1.9.1.min.js"></script>
<script src="${base}/web/bootstrap/js/bootstrap.min.js"></script>


<!-- bootstrap wizard js-->
<script src="${base}/web/vendors/wizard/jquery.bootstrap.wizard.min.js"></script>
<script>

			
           $('#rootwizard').bootstrapWizard({onTabShow: function(tab, navigation, index) {
                var $total = navigation.find('li').length; 
                var $current = index+1;

                // If it's the last tab then hide the last button and show the finish instead
                if($current >= $total) {
                    $('#rootwizard').find('.pager .next').hide();
                    $('#rootwizard').find('.pager .finish').show();
                    $('#rootwizard').find('.pager .finish').removeClass('disabled');
                } else {
                    $('#rootwizard').find('.pager .next').show();
                    $('#rootwizard').find('.pager .finish').hide();
                }
            }});
            $('#rootwizard .finish').click(function() {
				$.post("action/create",$("#group").serialize(),function(data){ 

					if( data.status == undefined)  
					{
							window.location.href="${f}";
						}

					});

                $('#rootwizard').find("	a[href*='tab1']").trigger('click');
            });
				
	</script>


</body>
